<meta charset="UTF8">

<script type="text/ng-template" id="designCommandAction.html">
	<div class="modal-header">
		<h3>mylife-home-core-designer</h3>
	</div>
	<div class="modal-body">
		<input type="radio" ng-model="data.type" value="component">Composant</input>
		<p>
			<div class="dropdown">
				<span>{{data.component}}:{{data.componentAction}}</span>
				<button type="button" class="dropdown-toggle btn btn-default btn-xs" ng-disabled="data.type !== 'component'">...</button>
				<ul class="dropdown-menu">
					<li class="ui-dropdown-item" ng-repeat="componentAction in componentActions" ng-click="changeComponentAction(componentAction)">
						<a><span>{{componentAction.component}}:{{componentAction.action}}</span></a>
					</li>
				</ul>
			</div>
		</p>
		<br/>
		<input type="radio" ng-model="data.type" value="window">Fenêtre</input>
		<p>
			<div class="dropdown">
				<input type="text" ng-model="data.window" class="dropdown-toggle" ng-disabled="data.type !== 'window'"></input>
				<button type="button" class="dropdown-toggle btn btn-default btn-xs" ng-disabled="data.type !== 'window'">...</button>
				<ul class="dropdown-menu">
					<li class="ui-dropdown-item" ng-repeat="window in windows" ng-click="data.window = window.id">
						<a><span>{{window.id}}</span></a>
					</li>
				</ul>
			</div>
			<input type="checkbox" ng-model="data.popup" ng-disabled="data.type !== 'window'">Popup</input>
		</p>

	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" ng-click="ok()">OK</button>
		<button class="btn btn-warning" ng-click="cancel()">Annuler</button>
	</div>
</script>

<script type="text/ng-template" id="designCommandDisplay.html">
	<div class="modal-header">
		<h3>mylife-home-core-designer</h3>
	</div>
	<div class="modal-body">
		Image par défaut : 
		<div class="dropdown">
			<input type="text" ng-model="data.defaultImage" class="dropdown-toggle"></input>
			<ul class="dropdown-menu dropdown-menu-limit">
				<li ng-repeat="resource in resources" ng-click="data.defaultImage = resource.id">
					<a>
						<span>{{resource.id}}</span>
						<img class="ui-resource-list" src="{{resource.data}}"
							tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{resource.data}}&quot;></img>"
							tooltip-append-to-body="true"></img>
					</a>
				</li>
			</ul>
		</div>
		<br/>
		Binding : 
		<div class="dropdown">
			<span>{{data.component}}:{{data.attribute}}</span>
			<button type="button" class="dropdown-toggle btn btn-default btn-xs">...</button>
			<ul class="dropdown-menu">
				<li class="ui-dropdown-item" ng-repeat="componentAttribute in componentAttributes" ng-click="changeComponentAttribute(componentAttribute)">
					<a><span>{{componentAttribute.component}}:{{componentAttribute.attribute}}</span></a>
				</li>
			</ul>
		</div>
		<table class="ui-design-command-display-map" ng-show="data.type.type === 'enum'">
			<thead>
				<tr>
					<th>Valeur</th>
					<th>Image</th>
					<th class="ui-design-command-display-map-actions"><button class="btn btn-default btn-xs" ng-click="data.map.push({ value:null, image:null })" title="Nouveau"><img src="images/new.png" height="16" width="16"></img></button></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in data.map">
					<td>
						<div class="dropdown">
							
							<button type="button" class="dropdown-toggle btn btn-default btn-xs">...</button>
							&nbsp;&nbsp;&nbsp;{{item.value}}
							<ul class="dropdown-menu">
								<li class="ui-dropdown-item" ng-repeat="value in data.type.values" ng-click="item.value = value">
									<a><span>{{value}}</span></a>
								</li>
							</ul>
						</div>
					</td>
					<td>
						<div class="dropdown">
							<input type="text" ng-model="item.image" class="dropdown-toggle"></input>
							<ul class="dropdown-menu dropdown-menu-limit">
								<li ng-repeat="resource in resources" ng-click="item.image = resource.id">
									<a>
										<span>{{resource.id}}</span>
										<img class="ui-resource-list" src="{{resource.data}}"
											tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{resource.data}}&quot;></img>"
											tooltip-append-to-body="true"></img>
									</a>
								</li>
							</ul>
						</div>
					</td>
					<td><button type="button" class="btn btn-default btn-xs" ng-click="deleteItem(item)" title="Supprimer"><img src="images/delete.png" height="16" width="16"></img></button></td>
				</tr>
			</tbody>
		</table>
		<table class="ui-design-command-display-map" ng-show="data.type.type === 'range'">
			<thead>
				<tr>
					<th>Min</th>
					<th>Max</th>
					<th>Image</th>
					<th class="ui-design-command-display-map-actions"><button class="btn btn-default btn-xs" ng-click="data.map.push({ min:data.type.min, max:data.type.max, image:null })" title="Nouveau"><img src="images/new.png" height="16" width="16"></img></button></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in data.map">
					<td><input type="number" ng-model="item.min"></td>
					<td><input type="number" ng-model="item.max"></td>
					<td>
						<div class="dropdown">
							<input type="text" ng-model="item.image" class="dropdown-toggle"></input>
							<ul class="dropdown-menu dropdown-menu-limit">
								<li ng-repeat="resource in resources" ng-click="item.image = resource.id">
									<a>
										<span>{{resource.id}}</span>
										<img class="ui-resource-list" src="{{resource.data}}"
											tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{resource.data}}&quot;></img>" tooltip-append-to-body="true"></img>
									</a>
								</li>
							</ul>
						</div>
					</td>
					<td><button type="button" class="btn btn-default btn-xs" ng-click="deleteItem(item)" title="Supprimer"><img src="images/delete.png" height="16" width="16"></img></button></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" ng-click="ok()">OK</button>
		<button class="btn btn-warning" ng-click="cancel()">Annuler</button>
	</div>
</script>

<script type="text/ng-template" id="designTextContext.html">
	<div class="modal-header">
		<h3>mylife-home-core-designer</h3>
	</div>
	<div class="modal-body">
		Binding : 
		<table class="ui-design-command-display-map">
			<thead>
				<tr>
					<th>Nom</th>
					<th>Attribut</th>
					<th class="ui-design-command-display-map-actions"><button class="btn btn-default btn-xs" ng-click="data.context.push({ component:null, attribute:null, id:null })" title="Nouveau"><img src="images/new.png" height="16" width="16"></img></button></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in data.context">
					<td>
						<input type="text" ng-model="item.id"></input>
					</td>
					<td>
						<div class="dropdown">
						<span>{{item.component}}:{{item.attribute}}</span>
							<button type="button" class="dropdown-toggle btn btn-default btn-xs">...</button>
							<ul class="dropdown-menu">
								<li class="ui-dropdown-item" ng-repeat="componentAttribute in componentAttributes" ng-click="changeComponentAttribute(item, componentAttribute)">
									<a><span>{{componentAttribute.component}}:{{componentAttribute.attribute}}</span></a>
								</li>
							</ul>
						</div>
					</td>
					<td><button type="button" class="btn btn-default btn-xs" ng-click="deleteItem(item)" title="Supprimer"><img src="images/delete.png" height="16" width="16"></img></button></td>
				</tr>
			</tbody>
		</table>
		<table class="ui-design-command-display-map" ng-show="data.type.type === 'range'">
			<thead>
				<tr>
					<th>Min</th>
					<th>Max</th>
					<th>Image</th>
					<th class="ui-design-command-display-map-actions"><button class="btn btn-default btn-xs" ng-click="data.map.push({ min:data.type.min, max:data.type.max, image:null })" title="Nouveau"><img src="images/new.png" height="16" width="16"></img></button></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in data.map">
					<td><input type="number" ng-model="item.min"></td>
					<td><input type="number" ng-model="item.max"></td>
					<td>
						<div class="dropdown">
							<input type="text" ng-model="item.image" class="dropdown-toggle"></input>
							<ul class="dropdown-menu dropdown-menu-limit">
								<li ng-repeat="resource in resources" ng-click="item.image = resource.id">
									<a>
										<span>{{resource.id}}</span>
										<img class="ui-resource-list" src="{{resource.data}}"
											tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{resource.data}}&quot;></img>" tooltip-append-to-body="true"></img>
									</a>
								</li>
							</ul>
						</div>
					</td>
					<td><button type="button" class="btn btn-default btn-xs" ng-click="deleteItem(item)" title="Supprimer"><img src="images/delete.png" height="16" width="16"></img></button></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" ng-click="ok()">OK</button>
		<button class="btn btn-warning" ng-click="cancel()">Annuler</button>
	</div>
</script>

<script type="text/ng-template" id="checkSchemaErrors.html">
	<div class="modal-header">
		<h3>mylife-home-core-designer</h3>
	</div>
	<div class="modal-body">
		Les erreurs de données suivantes ont été détectées suite à la vérification du schéma
		<ul>
			<li ng-repeat="error in errors">{{error.message}}</li>
		</ul>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" ng-click="ok()">OK</button>
	</div>
</script>

<div id="ui" ng-controller="uiController">

	<div id="main" class="light">
		<tabset>
		    <tab>
		    	<tab-heading><img class="tab-image" src="images/window.jpeg"></img>&nbsp;Fenêtres</tab-heading>
				<div id="ui-windows">
					<div id="ui-leftpane" splitter="{direction:'vertical',min:'110',max:'500'}">
						<div id="ui-itemlist-container" splitter="{direction:'horizontal',min:'100'}">
							<div id="ui-itemlist">
								<div id="ui-itemlist-wrapper">
									<ul class="ui-itemlist-list">
										<li class="ui-itemlist-item" data-identifier="app" ng-init="item = app">
											<div itemlist-item class="ui-itemlist-item">
												<img class="ui-itemlist-item" src="images/application.jpg"></img>
												<span class="ui-itemlist-item">Application</span>
											</div>
											<ul class="ui-itemlist-list">
												<li class="ui-itemlist-item" data-identifier="window:{{window.id}}" ng-repeat="window in windows" ng-init="item = window">
													<div itemlist-item class="ui-itemlist-item">
														<img class="ui-itemlist-item" src="images/ui.png"></img>
														<span class="ui-itemlist-item">{{window.id}}</span>
													</div>
													<ul class="ui-itemlist-list">
														<li class="ui-itemlist-item" data-identifier="command:{{action.id}}" ng-repeat="command in window.commands" ng-init="item = command">
															<div itemlist-item class="ui-itemlist-item">
																<img class="ui-itemlist-item" src="images/command.jpg"></img>
																<span class="ui-itemlist-item">{{command.id}}</span>
															</div>
														</li>
														<li class="ui-itemlist-item" data-identifier="command:{{action.id}}" ng-repeat="text in window.texts" ng-init="item = text">
															<div itemlist-item class="ui-itemlist-item">
																<img class="ui-itemlist-item" src="images/text.png"></img>
																<span class="ui-itemlist-item">{{text.id}}</span>
															</div>
														</li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div id="ui-propertybox-container">
							<div id="ui-propertybox">
								<div id="ui-propertybox-wrapper">
									<div ng-show="!ui.selectedItem" class="ui-propertybox-title">
										<span>Pas de selection</span>
									</div>
									<div ng-show="ui.selectedItem && ui.selectedItem.internal().type === 'application'" class="ui-propertybox-title">
										<img class="item-image" src="images/application.jpg" title="Application"></img>
										&nbsp;&nbsp;&nbsp;
										<span>Application</span>
									</div>
									<div ng-show="ui.selectedItem && ui.selectedItem.internal().type === 'window'" class="ui-propertybox-title">
										<img class="item-image" src="images/ui.png" title="{{ui.selectedItem.id}}"></img>
										&nbsp;&nbsp;&nbsp;
										<span>{{ui.selectedItem.id}}</span>
									</div>
									<div ng-show="ui.selectedItem && ui.selectedItem.internal().type === 'command'" class="ui-propertybox-title">
										<img class="item-image" src="images/command.jpg" title="{{ui.selectedItem.id}}"></img>
										&nbsp;&nbsp;&nbsp;
										<span>{{ui.selectedItem.id}}</span>
									</div>
									<div id="ui-propertybox-content">
										<table ng-show="ui.selectedItem">
											<thead>
												<tr>
													<th width="35%">Nom</th>
													<th width="65%">Valeur</th>
												</tr>
											</thead>
											<tbody>
												<tr ng-show="ui.selectedItem.internal().type === 'application'">
													<td>Fenêtre def.</td>
													<td>
														<div class="dropdown">
															<input type="text" ng-model="ui.selectedItem.defaultWindow" class="dropdown-toggle">
															</input>
															<ul class="dropdown-menu">
																<li class="ui-dropdown-item" ng-repeat="window in windows" ng-click="ui.selectedItem.defaultWindow = window.id">
																	<a><span>{{window.id}}</span></a>
																</li>
															</ul>
														</div>
													</td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'window' || ui.selectedItem.internal().type === 'command' || ui.selectedItem.internal().type === 'text'" >
													<td>ID</td>
													<td><input type="text" ng-model="ui.selectedItem.id"></input></td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'window'">
													<td>Img. fond</td>
													<td>
														<div class="dropdown">
															<input type="text" ng-model="ui.selectedItem.background" class="dropdown-toggle">
															</input>
															<ul class="dropdown-menu dropdown-menu-limit">
																<li class="ui-dropdown-item" ng-repeat="resource in resources" ng-click="ui.selectedItem.background = resource.id">
																	<a>
																		<span>{{resource.id}}</span>
																		<img class="ui-resource-list" src="{{resource.data}}"
																			tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{resource.data}}&quot;></img>"
																			tooltip-append-to-body="true"></img>
																	</a>
																</li>
															</ul>
														</div>
  													</td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'command' || ui.selectedItem.internal().type === 'text'" >
													<td>X</td>
													<td><input type="number" ng-model="ui.selectedItem.x"></input></td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'command' || ui.selectedItem.internal().type === 'text'" >
													<td>Y</td>
													<td><input type="number" ng-model="ui.selectedItem.y"></input></td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'command'" >
													<td>Affichage</td>
													<td>
														<button type="button" ng-click="designCommandDisplay(ui.selectedItem.display)" class="btn btn-default btn-xs">...</button>
														&nbsp;&nbsp;&nbsp;{{ui.selectedItem && ui.selectedItem.internal().type === 'command' && formatCommandDisplay(ui.selectedItem.display)}}
													</td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'command'" >
													<td>Prim. act.</td>
													<td title="{{ui.selectedItem && ui.selectedItem.internal().type === 'command' && formatCommandAction(ui.selectedItem.primaryAction, false)}}">
														<button type="button" ng-click="designCommandAction(ui.selectedItem.primaryAction)" class="btn btn-default btn-xs">...</button>
														&nbsp;&nbsp;&nbsp;{{ui.selectedItem && ui.selectedItem.internal().type === 'command' && formatCommandAction(ui.selectedItem.primaryAction, true)}}
													</td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'command'" >
													<td>Sec. act.</td>
													<td title="{{ui.selectedItem && ui.selectedItem.internal().type === 'command' && formatCommandAction(ui.selectedItem.secondaryAction, false)}}">
														<button type="button" ng-click="designCommandAction(ui.selectedItem.secondaryAction)" class="btn btn-default btn-xs">...</button>
														&nbsp;&nbsp;&nbsp;{{ui.selectedItem && ui.selectedItem.internal().type === 'command' && formatCommandAction(ui.selectedItem.secondaryAction, true)}}
													</td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'text'" >
													<td>Context</td>
													<td>
														<button type="button" ng-click="designTextContext(ui.selectedItem)" class="btn btn-default btn-xs">...</button>
														&nbsp;&nbsp;&nbsp;{{ui.selectedItem && ui.selectedItem.internal().type === 'text' && ui.selectedItem.context.length}} item(s)
													</td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'text'" >
													<td>Style</td>
													<td><input ng-model="ui.selectedItem.style"></input></td>
												</tr>
												<tr ng-show="ui.selectedItem.internal().type === 'text'" >
													<td>Texte</td>
													<td><input ng-model="ui.selectedItem.text"></input></td>
												</tr>
											</tbody>
										</table>
									</div>
									<div id="ui-propertybox-commands">
										<input type="checkbox" ng-model="ui.showAsPopup">popup</input>
										<button ng-show="ui.selectedItem && ui.selectedItem.internal().type !== 'application'" type="button" class="btn btn-default btn-xs" ng-click="deleteItem()" title="Supprimer"><img src="images/delete.png" height="16" width="16"></img></button>
										<button ng-show="ui.selectedItem" type="button" class="btn btn-default btn-xs" ng-click="createItem()" title="Nouveau"><img src="images/new.png" height="16" width="16"></img></button>
										<button ng-show="ui.selectedItem && ui.selectedItem.internal().type === 'window'" type="button" class="btn btn-default btn-xs" ng-click="createItem(true)" title="Nouveau texte"><img src="images/new.png" height="16" width="16"></img></button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="ui-designer-main-wrapper">
						<div id="ui-designer-main">
							<img id="ui-designer-main-img" ng-class="{true: 'ui-designer-main-img-normal'}[!ui.showAsPopup]" src="{{getResource(ui.selectedWindow.background)}}"></img>
							<div ng-repeat="command in ui.selectedWindow.commands" class="ui-designer-main-command" ng-class="{true: 'ui-designer-main-command-selected'}[command === ui.selectedItem]" ng-style="{ 'left':command.x, 'top':command.y }">
								<button class="btn btn-default command">
									<img class="ui-designer-main-command-img" src="{{command.display && command.display.defaultImage && getResource(command.display.defaultImage)}}"></img>
								</button>
							</div>
							<div ng-repeat="text in ui.selectedWindow.texts" class="ui-designer-main-text" ng-class="{true: 'ui-designer-main-text-selected'}[text === ui.selectedItem]" ng-style="{ 'left':text.x, 'top':text.y }">
								<span>{{text.id}}</span>
							</div>
						</div>
					</div>
				</div>
			</tab>
		    <tab>
		    	<tab-heading><img class="tab-image" src="images/resource.jpeg"></img>&nbsp;Ressources</tab-heading>
				<div class="ui-resource-wrapper">
					<!-- <div class="page-header "><h3>Ressources présentes dans le système</h3></div> -->
					
					<div class="panel panel-default">
						<div class="thumbnail ui-resource-list" ng-repeat="resource in resources">
							<img class="ui-resource-list" src="{{resource.data}}" tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{resource.data}}&quot;></img>" tooltip-append-to-body="true"></img>
							<div class="caption">
								<span class="ui-resource-list">{{resource.id}}</span>
								<p><button type="button" class="btn btn-default btn-xs" ng-click="destroyResource(resource)" title="Supprimer"><img src="images/delete.png" height="16" width="16"></src></button></p>
							</div>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading">Ajout d'une ressource</div>
	  					<div class="panel-body">
							<div>
								<table class="ui-resource-new">
									<tr>
										<td>Id</td>
										<td><input type="text" ng-model="$parent.newResourceId"></input></td>
									</tr>
									<tr>
										<td>Contenu</td>
										<td>
											<span class="btn btn-default btn-xs btn-file">
												<img src="images/upload.png" height="16" width="16"></img>
											    <input type="file" input-data="$parent.newResourceData" />
											</span>						
											<img src="{{$parent.newResourceData}}" class="ui-resource-new" tooltip-html-unsafe="<img class=&quot;ui-resource-tooltip&quot; src=&quot;{{$parent.newResourceData}}&quot;></img>" tooltip-append-to-body="true"></img>
										</td>
									</tr>
									<tr>
										<td class="ui-resource-new-commands" colspan="2">
											<button type="button" class="btn btn-default btn-xs" ng-click="newResource()" title="Ajouter"><img src="images/new.png" height="16" width="16"></src></button>
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
			</tab>
		</tabset>
	</div>

	<div id="commands">
		<button type="button" class="btn btn-primary" ng-click="reload()">Recharger</button>
		<button type="button" class="btn btn-primary" ng-click="save()">Enregistrer</button>
	</div>

	<!--  does not render what comes behind it, so it's probably wrong -->
	<div initializer></div>
	
</div>
